<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();

const getTime = () => {
  let currentDate = new Date();
  let currentYear = currentDate.getFullYear();
  let currentMonth = currentDate.getMonth() + 1; // 月份从0开始，所以要加1
  let currentDay = currentDate.getDate();
  let currentHour = currentDate.getHours();
  let currentMinute = currentDate.getMinutes();

  return (
    currentYear +
    "-" +
    currentMonth +
    "-" +
    currentDay +
    " " +
    currentHour +
    ":" +
    currentMinute
  );
};

// 订单详情信息
const OrderDetai = ref({
  money: route.query.price, //金额
  PaymentMethods: "eCNY", //支付方式
  OrderNumber: route.query.data, //订单编号
  OrderTime: getTime(), //下单时间
  TimeOfPayment: getTime(), //支付时间
});

// 接收参数,如果是购物车结算传过来的参数,返回CartView页面,如果是我的主页传过来的参数,跳转到我的页面
const back = () => {
  router.push({
    path: "/MeView",
  });
};
</script>

<template>
  <div class="contain">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="left" @click="$router.push('MeView')">
        <img src="/images/cart/WhiteBack.png" />
      </div>

      <div class="title">{{ $t("order.successfulTitle") }}</div>
    </div>

    <!-- 渐变盒子1 -->
    <div class="Gradientbox1"></div>
    <!-- 渐变盒子2 -->
    <div class="Gradientbox2"></div>

    <!-- 对勾 -->
    <div class="Tick"><img src="/images/cart/Tick.png" /></div>

    <!-- Payment Successful -->
    <div class="PaySuccess">{{ $t("order.successfulTitle") }}</div>

    <!-- 占位1 -->
    <div class="Placeholder1"></div>

    <!-- 有border的横杠 -->
    <div class="bar">
      <!-- 支付详情 -->
      <div class="payDetail">
        <div class="shadow"></div>
        <div class="top">
          <span class="pi">eCNY</span>
          <span class="money">{{ OrderDetai.money }}</span>
        </div>
        <div class="medium">
          <div class="left">
            <span>{{ $t("order.way") }}:</span>
            <span>{{ $t("order.payOrder") }}:</span>
            <span>{{ $t("order.time") }}:</span>
            <span>{{ $t("order.serverTime") }}:</span>
          </div>
          <div class="right">
            <span>{{ OrderDetai.PaymentMethods }}</span>
            <span>{{ OrderDetai.OrderNumber }}</span>
            <span>{{ OrderDetai.OrderTime }}</span>
            <span>{{ OrderDetai.TimeOfPayment }}</span>
          </div>
        </div>
        <!-- 渐变盒子3小圆点 -->
        <div class="Gradientbox3"></div>
        <!-- 渐变盒子4小圆点 -->
        <div class="Gradientbox4"></div>
      </div>
    </div>
    <div class="bg"></div>
    <div class="back" @click="back">{{ $t("order.finish") }}</div>
  </div>
</template>
<style lang="scss" scoped>
// 容器
.contain {
  width: 100vw;
  min-height: 100vh;
  background: rgba(100, 46, 142, 1);
  font-family: "PingFang SC";
  overflow: hidden;
  position: relative;
}

// 导航栏
.nav {
  height: 24rem;
  padding: 24rem 16rem 24rem;
  display: flex;
  align-items: center;

  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(100, 46, 142, 1);

  .left {
    width: 24rem;
    height: 24rem;
    line-height: 24rem;
    text-align: center;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    height: 28rem;
    margin-left: 16rem;
    font-size: 20rem;
    font-weight: 500;
    line-height: 28rem;
    text-align: center;
    color: rgba(255, 255, 255, 1);
  }
}

.Gradientbox1 {
  width: 128rem;
  height: 113rem;
  background: linear-gradient(45deg,
      rgba(100, 46, 142, 1) 55%,
      #6e3c95 84%,
      white 100%);
  border-radius: 50%;
  position: absolute;
  top: 103rem;
  left: -48rem;
}

.Gradientbox2 {
  width: 61rem;
  height: 48rem;
  background: linear-gradient(320deg,
      rgba(100, 46, 142, 1) 50%,
      #6e3c95 83%,
      white 100%);
  border-radius: 50%;
  position: absolute;
  top: 52rem;
  left: 344rem;
  z-index: 1000;
}

// 对勾
.Tick {
  position: absolute;
  left: 103rem;
  top: 110rem;
  width: 64rem;
  height: 64rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 2rem 10rem rgba(12, 2, 20, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 32rem;
    height: 20rem;
  }
}

.PaySuccess {
  width: 104rem;
  height: 56rem;
  font-size: 20rem;
  font-weight: 600;
  line-height: 28rem;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  position: absolute;
  left: 183rem;
  top: 114rem;
}

// 占位
.Placeholder1 {
  height: 214rem;
}

.bg {
  width: 1000rem;
  height: 1000rem;
  border-radius: 50%;
  position: absolute;
  background-color: rgba(230, 230, 230, 1);
  transform: translateX(-300rem);
  z-index: 99;
}

.back {
  position: fixed;
  bottom: 0rem;
  left: 0;
  right: 0;
  margin: 0 16rem 20rem;
  text-align: center;
  height: 40rem;
  line-height: 40rem;
  color: #fff;
  background-color: #642e8e;
  border-radius: 5rem;
  font-size: 16rem;
  z-index: 999;
}

.bar {
  width: 358rem;
  height: 10rem;
  border-radius: 141rem;
  background: rgba(255, 255, 255, 1);
  margin-left: 16rem;
  position: relative;
}

.payDetail {
  width: 326rem;
  height: 267rem;
  background: rgba(255, 255, 255, 1);
  margin-left: 16rem;
  position: absolute;
  z-index: 999;

  .shadow {
    height: 10rem;
    width: 326rem;
    background: linear-gradient(to top,
        rgba(255, 255, 255, 1) 20%,
        #949090 100%);
  }

  .top {
    height: 82rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1rem 1rem 1rem rgba(230, 230, 230, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(100, 46, 142, 1);
    font-weight: 500;

    .pi {
      font-size: 24rem;
      margin-right: 10rem;
    }

    .money {
      font-size: 36rem;
    }
  }

  .medium {
    height: 175rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1rem 1rem 1rem rgba(230, 230, 230, 1);
    display: flex;
    align-items: center;

    div {
      height: 120rem;
      font-size: 16rem;
      font-weight: 400;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .left {
      width: 80rem;
      color: #666666ff;
      margin-left: 8rem;
    }

    .right {
      color: #333333ff;
      margin-right: 8rem;
    }
  }

  .Gradientbox3 {
    width: 12rem;
    height: 12rem;
    background: linear-gradient(to right,
        rgba(230, 230, 230, 1) 0,
        rgba(230, 230, 230, 1) 50%,
        #dad3d3 50%,
        #dad3d3 100%);
    border-radius: 50%;
    position: absolute;
    top: 87rem;
    left: -7rem;
  }

  .Gradientbox4 {
    width: 12rem;
    height: 12rem;
    background: linear-gradient(to right,
        #dad3d3 0,
        #dad3d3 50%,
        rgba(230, 230, 230, 1) 50%,
        rgba(230, 230, 230, 1) 100%);
    border-radius: 50%;
    position: absolute;
    top: 87rem;
    right: -7rem;
  }
}
</style>
